<template>
  <div>
    <a href="javascript:;" @click="dialogVisibleIframe = true" v-if="!hideButton">{{btnText}}</a>
    <el-dialog
      :title="btnText"
      :fullscreen="false"
      :visible.sync="dialogVisibleIframe"
      :width="width"
      @open="handleOpen"
      >
      <div :style="`width:100%;height:${height}px;`">
        <iframe width='100%' height='100%' :src="url" frameborder="0" ref="iframe"></iframe>
      </div>
      <span slot="footer" class="dialog-footer" v-if="!hideFooter">
        <el-button type="primary" @click="handleOk">确 定</el-button>
        <el-button @click="dialogVisibleIframe=false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script type="text/javascript">
  define(['vue'],function(vue){
    return vue.component('comp-popup-iframe',{
      props : {
        // value : {required:false,defautl:{},}
      },
      data : function() {
        //默认从当前行中获得默认值,其次从定义中获得
        var colKey = this.$attrs['col-key'];
        // dump(this.$attrs.row[colKey] || this.$attrs.fld.value);
        // dump(this.$attrs.fld.hideFooter);
        // return;
        var fld = this.$attrs;
        if(this.$attrs.fld) {
          fld=this.$attrs.fld;
        }
        return {
          fld:fld,
          dialogVisibleIframe:false,
          btnText:fld.btnText || "点击",
          url:fld.url || "",
          width:fld.dialogWidth || "50%",
          value : this.$attrs.row[colKey] || fld.value,
          hideFooter : fld.hideFooter || false,
          hideButton : fld.hideButton || false,
          height:fld.height || 200,
          // styleIframe :
          // titleText:'查看明细',
          // actionUrl:this.action,
          // paramsData:{}
        };
      },
      // computed : {
      //   styleIframe : function() {
      //     return `width:100%;height:${this.height}px;`;
      //   }
      // },
      mounted : function() {
        this.handelClick(this.$attrs.row);
        //抛出onmount事件
        this.$emit('on-mount',this);
        // dump('iframe dialog mounted');
      },
      template: template,
      methods:{
        //如果在editbutton中使用，必须定义这个函数
        handelClick:function(row) {
          // this.row=row;          
          this.dialogVisibleIframe = this.hideButton;
        },
        //打开前将_uid传入子窗口
        handleOpen : function() {
          if(!window._ifrmComp) {
            window._ifrmComp = {};
          }

          //将_uid 作为 iframe 参数传入
          if(!window._ifrmComp[this._uid]) {
            this.url += "&uidParentComp="+this._uid;
            //将vue实例保存为window变量，方便子组件使用
            window._ifrmComp[this._uid] = this;
          }

          var key = `${this.fld.name}:onOpen`;
          if(this.$root.callbacks[key]) {
            this.$root.callbacks[key].apply(this,[this.$attrs.row]);
          }
        },

        //获得子窗体里的记录值
        getIframeValue : function() {
          var vueSon = this.$refs.iframe.contentWindow._objVue;
          if(!vueSon.getValue) {
            console.error('子模板的sonTpl中必须定义getValue()函数');
            return false;
          }
          return vueSon.getValue();
        },

        //提交按钮点击后触发
        handleOk : function() {
          var valueIframe = this.getIframeValue();
          dump('iframe 回调 fired, 当前行和value分别为:',this.$attrs.row ,valueIframe);

          var key = `${this.fld.name}:onSubmit`;
          if(this.$root.callbacks[key]) {
            var temp = this.$root.callbacks[key].apply(this,[valueIframe]);
            if(!temp) {
              return false;
            }
          }

          this.$emit('input',valueIframe);
          this.dialogVisibleIframe = false;

          var key = `${this.fld.name}:afterSubmit`;
          if(this.$root.callbacks[key]) {
            this.$root.callbacks[key].apply(this,[valueIframe]);
          }

        },

      },
    });
  });
</script>